<template>
  <app-page>
    <div class="order_index">
      <div class="order_content">
        <OrderHeader />
        <OrderTable />
      </div>
      <div class="order_footer">
        <div v-if="orderstore.state">
          <el-pagination
            v-model:current-page="orderstore.state.filterForm.page"
            v-model:page-size="orderstore.state.filterForm.page_size"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, prev, pager, next,sizes"
            :total="orderstore.state.orderListtotal"
            @size-change="orderstore.getorderList()"
            @current-change="orderstore.getorderList()"
          />
        </div>
      </div>
    </div>

    <OrderDialog />
  </app-page>
</template>

<script setup>
import { useOrderStore } from './order-store.js'
import OrderHeader from './components/OrderHeader.vue'
import OrderTable from './components/OrderTable.vue'
import OrderDialog from './components/OrderDialog.vue'

const orderstore = useOrderStore()

provide('OrderStore', {
  orderStore: orderstore,
  orderState: orderstore.state,
})
</script>

<style lang="scss" scoped>
.order_index {
  display: flex;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
}

.order_content {
  width: 100%;
  height: calc(100% - 40px);
  background: #fff;
}

.order_footer {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
</style>

<style>
.order_footer .el-pager li {
  margin-left: 8px;
  border-radius: 0;
}
.order_footer .el-pager li,
.order_footer .el-pagination__total,
.order_footer .el-pagination__sizes .el-select__selected-item{
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 14px;
  color: #000;
}
.order_footer .el-pager .is-active{
  color: #fff;
  background-color: #3711d8;
}
.order_footer .el-pager li:last-child {
  margin-right: 8px;
}
</style>
